<script setup lang="ts">
import { provide, reactive } from 'vue';
import {myStore} from '@/store/my'
import { itemDeleteAPI } from '@/api/my'
import ProjectExperiencePopup from './ProjectExperiencePopup.vue'
import { Toast } from 'vant';
const store = myStore()
const props = defineProps({
    page: {
      type: String
    }
})
const state = reactive({
  show: false,
  item: {}
})
const closeChange = () => {
  state.show = false
  store.getResumeDetails()
}
provide('popup', {
    closeChange
})
// 删除项目经历
const submitDelete = async(id: number) => {
    const res = await itemDeleteAPI({
        id
    })
    if (res) {
        Toast('删除成功')
        store.getResumeDetails()
    }else {
        Toast('删除失败')
    }
}

// 添加项目经历
const addWork = () => {
    state.item = {
        uuid: store.state.resumeInfo.id
    }
    state.show = true
}
// 修改项目经历
const editWork = (item) => {
    state.item = item
    state.show = true
}
</script>

<template>
    <div class="resume-label">
        <h3>项目经历<van-icon name="add-o" @click="addWork" v-if="props.page!=='preview'" /></h3>
        <van-swipe-cell
            v-if="store.state.projectList.length"
            v-for="(item,index) in store.state.projectList"
            :key="index"
        >
        <h4>{{item.project_name}}<van-icon @click="editWork(item)" name="arrow" v-if="props.page!=='preview'" /></h4>
            <p>{{item.project_start_time}} - {{item.project_end_time}}</p>
            <h5>项目经历</h5>
            <van-field 
                v-model="item.project_duty"
                autosize
                readonly
                label=""
                type="textarea" />
            <template #right >
                <img @click="submitDelete(item.project_id)" src="@/assets/img/icon/icon-delete.png" class="delete" />
            </template>
        </van-swipe-cell>
        <label v-else>请您填写项目经历</label>
    </div>
    <!-- 切换弹窗 -->
    <van-popup 
            v-model:show="state.show" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <ProjectExperiencePopup :item="state.item"/>
    </van-popup> 
</template>
<style scoped>
.text-list dt {
    font-weight: 300;
    font-size: 0.59rem;
    line-height: 0.59rem;
    color: #666666;
    line-height: 0.34rem;
    padding: 0.4rem 0.5rem;
    margin-right: 0.27rem;
    margin-bottom: 0.3rem;
    background: #F6F7F8;
    border-radius: 0.16rem;
    display: inline-block;
}
</style>